import QtQuick 2.12
import QtQuick.Controls 2.5
import QtQuick.Window 2.12
import QtQuick.Layouts 1.0

Window {
    id: root
    visible: true
    width: 800
    height: 400
    color: "Grey"
    title: "QML Load Dialog"
    minimumWidth: 600
    minimumHeight: 200

    RowLayout {
        id: toolbar
        x: 0
        y: 0
        width: 600
        height: 40

        Button {
            id: buttonQml
            width: 100
            text: "Load QML"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.preferredWidth: 200
            onClicked: showWidget("MyRectangle.qml")
        }

        Button {
            id: buttonPopQML
            width: 100
            text: "Pop QML"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.preferredWidth: 200
            onClicked: showWindow("MyWindow.qml")
        }

        Button {
            id: buttonQWidgetResize
            width: 100
            text: "QWidget resize"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.preferredWidth: 200
            onClicked: {
                g_MyCommand.onRectSizeChange(overlay0.x, overlay0.y, overlay0.width,overlay0.height)
            }
        }


        Button {
            id: buttonPopQWidget
            width: 100
            text: "Pop QWidget"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.preferredWidth: 200
        }

        Label {
            id: labelGetName
            width: 100
            text: qsTr("Pet Name")
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            Layout.preferredWidth: 100
            Layout.fillHeight: true
            Layout.fillWidth: false
        }

    }

    Rectangle {
        id: overlay0
        width: root.width * 0.5 - 10

        color: "#12229c"
        anchors.top: parent.top
        anchors.topMargin: 50
        anchors.left: parent.left
        anchors.leftMargin: 10
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 10
        border.width: 2
        border.color: "#703131"
    }

    Rectangle {
        id: overlay1
        color: "#0bfc28"
        anchors.left: overlay0.right
        anchors.leftMargin: 10
        anchors.right: parent.right
        anchors.rightMargin: 10
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 10
        anchors.top: overlay0.top
        anchors.topMargin: 0
        border.color: "#723c3c"
        border.width: 2
        Layout.fillHeight: true
        Layout.fillWidth: true
    }

    function showWidget(url){
        console.log(" main.showWidget(", url, ")")

        var component = Qt.createComponent(url)
        var obj = component.createObject(overlay1)
        obj.target = labelGetName
    }

    function showWindow(url){
        console.log(" main.showWindow(", url, ")")

        var component = Qt.createComponent(url)
        var obj = component.createObject(overlay1)
        obj.show()
    }
}

/*##^##
Designer {
    D{i:1;anchors_height:40;anchors_width:600;anchors_x:0;anchors_y:0}D{i:7;anchors_x:10;anchors_y:50}
D{i:8;anchors_x:403;anchors_y:50}
}
##^##*/
